//首页的less
html,body{
    width: 100%;
    height: 100%;
}
*{
margin: 0;
padding: 0;
}
body{
  
    display: flex;
    flex-direction: column;
    #content{
        
        width: 100%;
        flex: 1;
        overflow: scroll;
       
        #nav{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 95%;
            margin: auto;
            height: 44px;
          background: blue;
          .dynamicStatement{
              width: 84px;
              height: 40px;
              line-height: 32px;
              margin-left: 10px;
              text-align:center;
              color: rgba(66, 148, 255, 100);
             font-size: 20px;
             font-family: PingFangSC-bold;;
             border-bottom: 3px solid rgba(170, 217, 247, 100);
          }
          .AddDynamic{
            width: 84px;
            height: 32px;
            line-height: 32px;
            margin-right: 10px;
            text-align: center;
            border-radius: 20px 20px 20px 20px;
            background-color: rgba(170, 217, 247, 100);
            color: rgba(0, 81, 119, 100);
            font-size: 14px;
          }
        }
        #substance{
            width: 95%;
            margin: auto;
            display: flex;
            flex-direction: column;
            overflow: scroll;
            .recommend{
               margin: 5px 0 10px 10px;
                width: 72px;
                height: 25px;
                color: rgba(16, 16, 16, 100);
                font-size: 18px;
                text-align: left;
                font-family: PingFangSC-regular;
            }
            .chocolate{
                width: 100%;
                height: 210px;
                background: #f60;
                margin-bottom: 20px;
                border-radius: 15px;
                border:1px solid #ccc;
                overflow: hidden;
                .vd{
                    width: auto;
                    height: 150px;
                    background: url(../../assets/imgs/course-img04.jpg) no-repeat center;
                    background-size: 100%;
                   
                }
                .chotext1{
                    margin-left: 20px;
                    color: rgba(16, 16, 16, 100);
                    font-size: 16px;
                    text-align: left;
                    font-family: PingFangSC-regular;
                }
                .chotext2{
                    margin:5px 0 0 20px;
                    font-size: 12px;
                    color: rgba(154, 154, 154, 100);
                }
            }
           #user{
            width: 100%;
            height: 452px;
               display: flex;
               flex-direction: column;
               border-bottom: 10px solid #ccc;
               .UserAvatar{
                   display: flex;
                   width: 100%;
                   height: 60px;
                   .ava{
                       width: 60px;
                       height: 60px;
                       border-radius: 50%;
                       border: 1px solid #f60;
                   }
                   .username{
                       margin: 10px 0 0 15px;
                   }
               }
               .usertext{
                   width: auto;              
                   height: 59px;
                   text-align: center;
                font-size: 14px;
                margin-top: 10px;
               }
               .picture{
                   margin-top: 10px;
                   width: 100%;
                   height: 226px;
                   display: flex;
                   justify-content: space-between;
                   align-content: space-between;
                   flex-wrap: wrap;
                   div{
                       width: 118px;
                       height:48%;
                       background: #ccc;
                   }
               }
           }

            
        }


        #PersonalData {
            position: relative;
            width: 100%;
            height: 200px;
            background: #fff;
        
            .avatar {
                position: absolute;
                left: 20px;
                top: 25px;
                width: 120px;
                height: 120px;
                background: url("../../assets/imgs/headerPic.jpg") no-repeat;
                background-size: 100%;
                border: 1px solid #4495ff;
                border-radius: 50%;
            }
        
            .userName {
                position: absolute;
                left: 155px;
                top: 75px;
                width: 68px;
                height: 30px;
                color: rgba(16, 16, 16, 100);
                font-size: 22px;
            }
        
            .signature {
                position: absolute;
                left: 20px;
                top: 160px;
                width: 374px;
                height: 25px;
                color: rgba(138, 138, 138, 100);
                font-size: 18px;
            }
            .icon-chuangxiangbaiyinvip{
                position: absolute;
                left: 110px;
                top: 119px;
                font-size: 20px;
                color: #f60;
            }
        }
        
        #MotionData {
            position: relative;
            margin-top: 20px;
            width: 100%;
            height: 160px;
            background: #fff;
        
            .MotionDatatitle {
                position: absolute;
                left: 54px;
                top: 20px;
                width: 74px;
                height: 25px;
                color: rgba(16, 16, 16, 100);
                font-size: 18px;
            }
            .icon-shujutu{
                position: absolute;
                left: 23px;
                top: 15px;
                font-size: 28px;
                color: #549eff;
            }
            .icon-youjiantou1{
                position: absolute;
                right:15px;
                top:15px;
                font-size: 27px;
            }
        
            .motionData {
                position: absolute;
                left: 34px;
                bottom: 20px;
                width: 343px;
                height: 85px;
                display: flex;
                justify-content: space-between;
        
                .motionDataleft {
                    width: 156px;
                    height: 85px;
        
                    .motionDataleft-title {
                        width: 48px;
                        height: 22px;
                        color: rgba(138, 138, 138, 100);
                        font-size: 16px;
                    }
        
                    .motionDataleft-text {
                        margin-top: 15px;
                        width: 156px;
                        height: 48px;
                        line-height: 48px;
                        color: rgba(66, 148, 255, 100);
                        font-size: 34px;
                    }
                }
        
                .motionDataright {
                    width: 156px;
                    height: 85px;
        
                    .motionDataright-title {
                        width: 48px;
                        height: 22px;
                        color: rgba(138, 138, 138, 100);
                        font-size: 16px;
                    }
        
                    .motionDataright-text {
                        margin-top: 15px;
                        width: 156px;
                        height: 48px;
                        line-height: 48px;
                        color: rgba(66, 148, 255, 100);
                        font-size: 34px;
                    }
                }
            }
        }
        
        #SportsBadge {
            position: relative;
            margin-top: 20px;
            width: 100%;
            height: 180px;
            background: #fff;
        
            .SportsBadgetitle {
                position: absolute;
                left: 50px;
                top: 20px;
                width: 112px;
                height: 25px;
                color: rgba(16, 16, 16, 100);
                font-size: 18px;
            }
            .icon-huizhang{
                position: absolute;
                left: 15px;
                top: 15px;
                font-size: 27px;
                color: #549eff;
            }
            .icon-youjiantou1{
                position: absolute;
                right: 15px;
                top: 15px;
                font-size: 27px;
            }
        
            .sportsBadge {
                position: absolute;
                top: 56px;
                width: 100%;
                height: 100px;
                display: flex;
                justify-content: space-around;
        
                .sportsBadgeleft {
                    width: 100px;
                    height: 100px;
                    border: 1px solid rgba(187, 187, 187, 100);
                    border-radius: 50%;
                    background: url("../../assets/imgs/mybadge01.jpg") no-repeat;
                    background-size: 100%;
                }
        
                .sportsBadgecenter {
                    width: 100px;
                    height: 100px;
                    border: 1px solid rgba(187, 187, 187, 100);
                    border-radius: 50%;
                    background: url("../../assets/imgs/mybadge02.jpg") no-repeat;
                    background-size: 100%;
                }
        
                .sportsBadgeright {
                    width: 100px;
                    height: 100px;
                    border: 1px solid rgba(187, 187, 187, 100);
                    border-radius: 50%;
                    background: url("../../assets/imgs/mybadge03.jpg") no-repeat;
                    background-size: 100%;
                }
            }
        }
        
        #SignOut {
            margin-top: 20px;
            width: 100%;
            height: 40px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        
            .SignOutbtn {
                width: 74px;
                height: 25px;
                color: rgba(66, 148, 255, 100);
                font-size: 18px;
            }
        }
        
        #BottomNav {
            margin-top: 48px;
            width: 100%;
            height: 50px;
            background: #fff;
        }
      }
      .show{
          display: block
        }
        .active{
          color: skyblue;
        }
    #header{
        width: 100%;
        height: 200px;
        // background: #f60;
        .swiper {
            width: auto;
            height: 200px;
            img{
                width: 100%;
                height: 200px;
            }
        }  
        }
   
    #main{
        flex: 1;
       overflow: scroll;
       
    .content1{
        display: flex;
        justify-content: space-around;
        width: 100%;
        height:150px;
        margin: auto;
        margin: 10px 0 10px 0;
      
        .rank{
            position: relative;
            width: 150px;
            height: 150px;
            background:rgba(7, 7, 241, 0.6);
            background-size: 50%;
            border-radius: 15px;
            .dya{
                width: 100px;
                height: 30px;
               margin: 10px 0 0 25px;
               font-size: 14px;
               font-weight: 550;
            }
            .img{
                position: absolute;
                bottom: 20px;
                left: 5px;
                width: 100px;
                height: 100px;
             background: url(../../assets/imgs/index-card-rank.png) no-repeat;
             background-size: 100%;
             opacity: 0.3;
            }
            .num{
                width: 70px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                position: absolute;
                bottom: 10px;
                right: 15px;
                font-size: 40px;
                font-weight: 550;
                color: #fff;
            }
        }
        .punch{
            position: relative;
            width: 150px;
            height: 150px;
            background:rgba(100, 100, 231, 0.6);
            background-size: 50%;
            border-radius: 15px;
            .punchs{
                width: 100px;
                height: 30px;
               margin: 10px 0 0 25px;
               font-size: 14px;
               font-weight: 550;
            }
            .imgs{
                position: absolute;
                bottom: 20px;
                left: 5px;
                width: 100px;
                height: 100px;
             background: url(../../assets/imgs/index-card-sum.png) no-repeat;
             background-size: 100%;
             opacity: 0.3;
            }
            .Punchintoday{
                width: 100px;
                height: 40px;
                position: absolute;
                bottom: 30px;
                right: 10px;
                border-radius: 20px;
                text-align: center;
                line-height: 30px;
                border: 3px solid skyblue;
               
                
            }
        }
    }
}
    .content2{
        display: flex;
        justify-content: space-around;
        width: 100%;
        height:110px;
        margin: auto;
        margin: 20px 0 20px 0;
        .motionData{
            width: 180px;
            height: 110px;
            background:url(../../assets/imgs/index-card-data.png) no-repeat;
            background-size: 100%;
            border-radius: 15px;
          .sports{
              color: #fff;
             margin: 10px 0 0 10px;
          }  
        }
        .sportsBadge{
            position: relative;
            width: 185px;
            height: 110px;
            background: rgba(66, 77, 243, 0.4);
            border-radius: 15px;
            .badge{
                width:100px;
                height: 25px;
                margin: 10px 0 0 10px;
                color: rgba(0, 81, 119, 100);
                font-size: 16px;
            }
            .imgss{
                position: absolute;
                bottom: 0px;
                left: 5px;
                width: 100px;
                height: 100px;
             background: url(../../assets/imgs/index-card-badge.png) no-repeat;
             background-size: 100%;
             opacity: 0.3;
            }
            .nums{
                position: absolute;
                bottom: 10px;
                right: 30px;
                font-size: 80px;
                font-family: PingFangSC-bold;
                color: #004E73;
            }
            .mei{
                position: absolute;
                bottom: 20px;
                right: 10px; 
                font-family: PingFangSC-bold;
                color: #004E73;
                font-size: 18px;
            }
        }
     
    }
    .content3{
        width: 95%;
        height: 110px;
        margin: auto;
        background: url(../../assets/imgs/index-swiper-bg2.jpg) no-repeat;
        background-size: 100%;
        border-radius: 15px;
        margin-bottom: 10px;
        div{
            color: #fff;
            margin: 10px 0 0 10px;
        }
       
    }
    .content4{
        width: 95%;
        height: 110px;
        margin: auto;
        background: url(../../assets/imgs/index-card-run.png) no-repeat;
        background-size: 100%;
        border-radius: 15px;
        margin-bottom: 10px;
        div{
            color: #fff;
            margin: 10px 0 0 10px;
        }
    }
    }
    footer{
        display: flex;
        justify-content: space-between;
        align-content: center;
        width: 100%;
        height: 77px;
        .icon{
            width: 20%;
            text-align: center;
        }
        .iconfont{
            font-size: 30px;
        }
        div{
            font-size: 16px
        }
    }



